<template>
  <div class="footer">
    <ul>
      <li v-for="nav in nav_list" :key="nav.id">
         <span v-if="nav.is_site"><a :href="nav.link">{{nav.title}}</a></span>
         <span v-else><router-link :to="nav.link">{{nav.title}}</router-link></span>
       </li>
    </ul>
    <p>Copyright © hkaiyun.com版权所有 | 湘ICP备2022015350号-4</p>
  </div>
</template>

<script>
export default {
  name: "FooterComp",
  data() {
    return {
      nav_list: []
    }
  },
  created(){
    this.get_nav_list();
  },
  methods: {
    //获取底部导航栏数据
    get_nav_list() {
      this.$axios.get(`${this.$settings.Host}/home/nav/footer/`, {}).then(res => {
        this.nav_list=res.data
      })
    }
  }
}
</script>

<style scoped>
.footer {
  width: 100%;
  height: 128px;
  background: #25292e;
  color: #fff;
}
.footer ul{
  margin: 0 auto 16px;
  padding-top: 38px;
  width: 810px;
}
.footer ul li{
  float: left;
  width: 112px;
  margin: 0 10px;
  text-align: center;
  font-size: 14px;
}
.footer ul::after{
  content:"";
  display:block;
  clear:both;
}
.footer p{
  text-align: center;
  font-size: 12px;
}

.footer ul li a,
.footer ul li a:visited,
.footer ul li a:hover,
.footer ul li a:active,
.footer ul li router-link {
  color: #fff;
}
</style>
